<template>
	<div>
		<!-- 拜访时间 -->
		<van-popup v-model:show="popupShow" position="bottom" closeable>
			<div class="title">
				<span>{{ title }}</span>
			</div>
			<div class="flex_box">
				<van-date-picker
					v-model="dateData.currentDate"
					:min-date="dateData.minDate"
					:show-toolbar="false"
					:formatter="formatterDate"
					swipe-duration="250"
				/>
				<van-time-picker
					v-model="dateData.currentTime"
					:show-toolbar="false"
					:formatter="formatterDate"
					swipe-duration="250"
				/>
			</div>
			<div class="operation">
				<div @click="popupShow = false">取消</div>
			</div>
		</van-popup>
	</div>
</template>
<script setup>
	// eslint-disable-next-line no-unused-vars
	const props = defineProps(['title'])
	const popupShow = ref(false)
	defineExpose({ popupShow })
	const dateData = reactive({
		currentDate: formattedDate(new Date()).split('-'),
		minDate: new Date(2020, 0, 1),
		maxDate: new Date(),
		currentTime: formattedTime(),
		maxHour: new Date().getHours(),
		maxMinute: new Date().getMinutes()
	})
	//格式化日期
	const formatterDate = (type, option) => {
		if (type === 'year') {
			option.text += '年'
		}
		if (type === 'month') {
			option.text += '月'
		}
		if (type === 'day') {
			option.text += '日'
		}
		if (type === 'hour') {
			option.text += '时'
		}
		if (type === 'minute') {
			option.text += '分'
		}
		return option
	}
	const emit = defineEmits(['timeConfirm'])
	const timeConfirm = () => {
		popupShow.value = false
		let time = `${dateData.currentDate.join('-')}T${dateData.currentTime.join(':')}`
		emit('timeConfirm', time)
	}
	// 日期处理
	function formattedDate(date) {
		if (!date) return ''
		const today = date
		const year = today.getFullYear()
		const month = String(today.getMonth() + 1).padStart(2, '0')
		const day = String(today.getDate()).padStart(2, '0')
		return `${year}-${month}-${day}`
	}
	//时间处理
	function formattedTime() {
		let now = new Date()
		let hours = now.getHours().toString().padStart(2, '0')
		let minutes = now.getMinutes().toString().padStart(2, '0')
		return [hours, minutes]
	}
</script>
<style lang="scss" scoped>
	::v-deep(.van-overlay) {
		background-color: rgba(0, 0, 0, 0.3);
	}
	::v-deep(.van-popup) {
		border-radius: 5px;
		.van-popup__close-icon {
			font-size: 19px;
		}
		.title {
			height: initial;
			color: #353639;
			font-weight: bold;
			font-size: 14px;
			padding: 20px 16px;
			span {
				padding-left: 4px;
			}
		}
		.flex_box {
			display: flex;
			.van-picker:nth-child(1) {
				flex: 2;
			}
			.van-picker:nth-child(2) {
				flex: 1;
			}
			.van-picker-column {
				font-size: 15px;
			}
		}
		.operation {
			padding: 16px 16px 24px;
			display: flex;
			border: 1px solid rgba(151, 151, 151, 0.1);
			box-shadow: 0px 2px 20px 0px rgba(95, 95, 95, 0.2);
			background-color: #ffffff;
			div {
				flex: 1;
				text-align: center;
				padding: 10px;
				border-radius: 5px;
				font-size: 15px;
			}
			div:nth-child(1) {
				color: #0052cc;
				border: 1px solid #0052cc;
				margin-right: 11px;
			}
			div:nth-child(2) {
				background-color: #0052cc;
				border: 1px solid #0052cc;
				color: #ffffff;
			}
		}
	}
</style>
